<template>
  <div class="tableLayer">
    <div class="header">
      <p>基本情况信息表</p>
    </div>
    <div class="content">
      <div class="nav">
        <!-- <div class="search-box">
                <el-input placeholder="请输入内容" v-model="searchtext" class="input-with-select" size="medium">
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
        </div>-->
        <div>
          <el-button plain size="medium" @click="openIdenFilterDialog">指标过滤</el-button>
          <el-button
            plain
            size="medium"
            v-popover:popoverdanlieyunsuan
            class="btn_danlieyunsuan"
          >单列运算</el-button>
          <el-button plain size="medium" @click="indCalculate">指标运算</el-button>
          <el-button plain size="medium" @click="gotoPosition">地图定位</el-button>
          <!-- <el-button plain size="medium">数据下载</el-button> -->
        </div>
      </div>

      <el-table
        :data="saveTableData.tableData"
        size="mini"
        border
        style="width: 100%"
        class="mapTable"
        highlight-current-row
        @current-change="handleCurrentRowChange"
        @header-click="handleHeaderClick"
        ref="table"
      >
        <el-table-column
          :show-overflow-tooltip="true"
          :render-header="labelHead"
          v-for="(item,index) in eleTable.headerData"
          :prop="item.idenCode"
          :label="item.idenName"
          :key="index"
          :idenType="item.idenType"
        ></el-table-column>
      </el-table>

      <el-pagination
        layout="prev, pager, next,jumper"
        :total="pagination.total"
        :page-size = pagination.pageSize
        @current-change="pageChange"
      ></el-pagination>
    </div>

    <el-dialog
      title="指标过滤"
      :visible.sync="idenFilter.idenFilterDialogVisible"
      width="30%"
      :modal="false"
      :close-on-click-modal="true"
      custom-class="idenFilterDialog"
    >
      <div class="content">
        <el-tabs v-model="tabActiveName" type="card" id="idenFilterTab">
          <el-tab-pane label="文本类型" name="text_content">
            <el-checkbox-group v-model="idenFilter.idenFilterCheckList.text_content">
              <el-checkbox
                v-for="(item,index) in saveTableData.headerData"
                v-if="item.idenType==1"
                :label="item.idenName"
                :name="item.idenCode"
                :key="index"
                v-model="checked"
              ></el-checkbox>
            </el-checkbox-group>
            <div class="btn-box">
              <el-button plain size="medium" @click="idenFilterGetAll(1)">全选</el-button>
              <el-button plain size="medium" @click="idenFilterInvert(1)">反选</el-button>
              <el-button plain size="medium" @click="idenFilterClearCheck(1)">取消全部</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="数字类型" name="num_content">
            <el-checkbox-group v-model="idenFilter.idenFilterCheckList.num_content">
              <el-checkbox
                v-for="(item,index) in saveTableData.headerData"
                v-if="item.idenType==2"
                :label="item.idenName"
                :name="item.idenCode"
                :key="'num_content'+index"
                v-model="checked"
              ></el-checkbox>
            </el-checkbox-group>
            <div class="btn-box">
              <el-button plain size="medium" @click="idenFilterGetAll(2)">全选</el-button>
              <el-button plain size="medium" @click="idenFilterInvert(2)">反选</el-button>
              <el-button plain size="medium" @click="idenFilterClearCheck(2)">取消全部</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="枚举类型" name="iden_content">
            <el-checkbox-group v-model="idenFilter.idenFilterCheckList.iden_content">
              <el-checkbox
                v-for="(item,index) in saveTableData.headerData"
                v-if="item.idenType==4"
                :label="item.idenName"
                :name="item.idenCode"
                :key="index"
                v-model="checked"
              ></el-checkbox>
            </el-checkbox-group>
            <div class="btn-box">
              <el-button plain size="medium" @click="idenFilterGetAll(4)">全选</el-button>
              <el-button plain size="medium" @click="idenFilterInvert(4)">反选</el-button>
              <el-button plain size="medium" @click="idenFilterClearCheck(4)">取消全部</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="日期类型" name="time_content">
            <el-checkbox-group v-model="idenFilter.idenFilterCheckList.time_content">
              <el-checkbox
                v-for="(item,index) in saveTableData.headerData"
                v-if="item.idenType==3"
                :label="item.idenName"
                :name="item.idenCode"
                :key="index"
                v-model="checked"
              ></el-checkbox>
            </el-checkbox-group>
            <div class="btn-box">
              <el-button plain size="medium" @click="idenFilterGetAll(3)">全选</el-button>
              <el-button plain size="medium" @click="idenFilterInvert(3)">反选</el-button>
              <el-button plain size="medium" @click="idenFilterClearCheck(3)">取消全部</el-button>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="idenFilter.idenFilterDialogVisible = false" size="medium">取 消</el-button>
        <el-button type="primary" @click="idenFilterSubmit" size="medium">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="指标运算"
      :visible.sync="indenCount.indenCountDialogVisible"
      width="500px"
      :modal="false"
      :close-on-click-modal="true"
      custom-class="idenCountDialog"
      @close="indenCountClose"
      @open="indenCountOpen"
    >
      <div class="content" id="com-selection">
        <el-tabs v-model="indenCount.indenCountActiveName" type="card">
          <el-tab-pane label="快速运算" name="quik">
            <div id="calculator-quik"></div>
          </el-tab-pane>
          <el-tab-pane label="自定义运算" name="userdef">
            <div id="calculator-userDefined"></div>
          </el-tab-pane>
          <el-tab-pane label="确认指标" name="confirm" :disabled="indenCount.isdisabled">
            <div id="calculator-confirm"></div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>

    <el-popover
      ref="popoverdanlieyunsuan"
      placement="bottom"
      width="110"
      popper-class="popoverdanlieyunsuan"
      trigger="click"
    >
      <div>
        <el-button plain size="medium" @click="danlieyunsun('max')">最大值</el-button>
        <el-button plain size="medium" @click="danlieyunsun('min')">最小值</el-button>
        <el-button plain size="medium" @click="danlieyunsun('avg')">平均值</el-button>
        <el-button plain size="medium" @click="danlieyunsun('ad')">平均偏差</el-button>
        <el-button plain size="medium" @click="danlieyunsun('sum')">总和</el-button>
        <el-button plain size="medium" @click="danlieyunsun('median')">中位数</el-button>
      </div>
    </el-popover>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import axios from "axios";
import microConfig from "static/config/micro.js";
import searchresultData from "../query/searchresult.data.js";
import control from "utils/map/lib/common/dimension.switching.js";
export default {
  name: "tableLayer",
  components: {
  },
  props: ["selectedSearchParams"],
  data() {
    return {
      checked: true,
      searchtext: "",
      idenFilter: {
        //指标过滤参数
        idenFilterDialogVisible: false,
        idenFilterList: {
          text_content: [],
          num_content: [],
          iden_content: [],
          time_content:[]
        },
        idenFilterCheckList: {
          text_content: [],
          num_content: [],
          iden_content: [],
          time_content:[]
        }
      },
      //保存的原始数据
      saveTableData: {
        headerData: [], //表头
        tableData: [], //行数据
        numIden: [] //数字指标
      },
      //在页面显示数据
      eleTable: {
        headerData: []
      },
      table: {
        //表格参数
        selectedRow: {}, //选中行
        selectedColumn: {}, //选中列

        columnCount: 0,
        calHeader: [], //多列运算保存表头
        formula: [] //多列运算公式数组
      },
      pagination: {
        total: 0,
        pageSize:microConfig.table.pagesize
      },
      argstable: {
        current: 1
      }, //基层查询请求数据参数
      indenCount: {
        //指标运算
        indenCountDialogVisible: false,
        indenCountActiveName: "quik",
        isdisabled: true
      },
      tabActiveName: "text_content"
    };
  },
  computed: {
    ...mapState({
      showFastCollectLayer: state => state.micro.showFastCollectLayer,
      showTableLayer: state => state.micro.showTableLayer
    })
  },
  watch: {
    selectedSearchParams(newval) {
      this.selectedSearchParams = newval;
    }
  },
  mounted() {
    this.init();
  },
  beforeDestroy() {},
  methods: {
    ...mapMutations([
      "changeShowFastCollectLayer",
      "changeShowTypeTabLayer",
      "changeShowTableLayer"
    ]),
    labelHead(h, { column, $index }) {
      let l = column.label.length + 2;
      let f = 16;
      column.minWidth = f * l;
      this.$refs["table"].doLayout();
      return h("div", [column.label]);
    },
    closeFastCollect() {
      this.$store.commit("changeShowFastCollectLayer", false);
      this.$store.commit("changeShowTypeTabLayer", false);
    },
    //点击表头事件
    handleHeaderClick(column, event) {
      let idenCode = column.property;
      for (let i in this.eleTable.headerData) {
        if (this.eleTable.headerData[i].idenCode == idenCode) {
          let headData = this.eleTable.headerData[i];
          if (headData.idenType == 2) {
            if(headData.hasOwnProperty("isIndCalculate")&&headData.isIndCalculate){//指标运算的列不参与单列运算
              return;
            }
            //数字指标
            let th = "";
            if ($(event.target).hasClass("is-leaf")) {
              th = $(event.target);
            } else {
              th = $(event.target)
                .parent()
                .parent();
            }
            let className = $(th).attr("class");
            let newclassName = className.replace("is-leaf", "");
            $(".tableLayer tr th, .tableLayer tr td").removeClass("active");
            if (this.table.selectedColumn.property == idenCode) {
              //取消选择
              this.table.selectedColumn = {};
            } else {
              this.table.selectedColumn = column;
              $("." + newclassName).addClass("active");
            }
          } else {
            return;
          }
        }
      }
    },
    //单列运算
    danlieyunsun(type) {
      let that = this;
      $(".btn_danlieyunsuan").click();
      if (this.table.selectedColumn.hasOwnProperty("id")) {
        let title = "";
        switch (type) {
          case "max":
            title = "最大值";
            break;
          case "min":
            title = "最小值";
            break;
          case "avg":
            title = "平均值";
            break;
          case "sum":
            title = "总和";
            break;
          case "median":
            title = "中位数";
            break;
          case "ad":
            title = "平均偏差";
            break;
          default:
            break;
        }
        let microQuery = {
          conditions: that.selectedSearchParams.conditions,
          msConditions: that.selectedSearchParams.msConditions,
          isSpecial: "none", //直接如此传
          periods: that.selectedSearchParams.periods,
          regionType: that.selectedSearchParams.regions.regionCodeType,
          regions: that.selectedSearchParams.regions.regionArr
        };

        axios({
          url: microConfig.queryCalculation,
          method: "post",
          timeout: axiosTimeOut,
          params: {
            filed: this.table.selectedColumn.property,
            microId: that.selectedSearchParams.microid,
            symbol: type
          },
          data: microQuery
        })
          .then(function(response) {
            if (response.data.message == "success") {
              let data = response.data.data;
              let result = "";
              for (let i in data) {
                result = data[i];
              }
              const h = that.$createElement;
              that.$msgbox({
                title: that.table.selectedColumn.label,
                width: "300px",
                message: h("div", { style: "width:100%" }, [
                  h(
                    "h3",
                    {
                      style:
                        "text-align:center;margin-bottom:20px;text-align:center;"
                    },
                    title
                  ),
                  h(
                    "h1",
                    { style: "font-weight:bold;text-align:center;" },
                    Number(result).toFixed(2)
                  )
                ]),
                confirmButtonText: "确定",
                customClass: "microdanlieyunsuanclass"
              });
            } else {
              that.$message({
                message: response.data.message,
                type: "error"
              });
              return;
            }
          })
          .catch(function(error) {
            console.log(error);
          });
      } else {
        that.$message({
          message: "请先选择要计算的数字指标",
          type: "error"
        });
      }
    },
    openIdenFilterDialog() {
      this.idenFilter.idenFilterDialogVisible = true;
    },
    //指标过滤
    idenFilterSubmit() {
      let that = this;
      that.idenFilter.idenFilterDialogVisible = false;
      that.eleTable.headerData = [];
      let head = that.saveTableData.headerData;
      for (let i = 0; i < head.length; i++) {
        if (that.idenFilter.idenFilterCheckList.text_content.includes(head[i].idenName)) {
          that.eleTable.headerData.push(head[i]);
        }else if(that.idenFilter.idenFilterCheckList.num_content.includes(head[i].idenName)){
          that.eleTable.headerData.push(head[i]);
        }else if(that.idenFilter.idenFilterCheckList.time_content.includes(head[i].idenName)){
          that.eleTable.headerData.push(head[i]);
        }else if(that.idenFilter.idenFilterCheckList.iden_content.includes(head[i].idenName)){
          that.eleTable.headerData.push(head[i]);
        }
      }
    },
    init() {
      let that = this;
      let microQuery = {
        conditions: this.selectedSearchParams.conditions,
        msConditions: this.selectedSearchParams.msConditions,
        isSpecial: "none", //直接如此传
        periods: this.selectedSearchParams.periods,
        regionType: this.selectedSearchParams.regions.regionCodeType,
        regions: this.selectedSearchParams.regions.regionArr
      };
      let argstable = {
        //左边列表查询条件
        current: that.argstable.current,
        size: microConfig.table.pagesize,
        microId: this.selectedSearchParams.microid, //主表id
        microQuery: microQuery
      };
      that.argstable = argstable;
      this.microSearch(true);
    },
    //基层查询(表格数据)
    microSearch(status) {
      let that = this;
      this.eleTable.headerData = [];
      // this.eleTable.tableData = [];
      axios({
        url: microConfig.microSearch,
        method: "post",
        timeout: axiosTimeOut,
        params: {
          current: that.argstable.current,
          microId: that.argstable.microId,
          size: microConfig.table.pagesize
        },
        data: that.argstable.microQuery
      })
        .then(function(response) {
          if (response.data.message == "success") {
            let data = response.data.data;
            that.pagination.total = data.content.total;
            that.inittabledata(data, status);
          } else {
            that.$message({
              message: result.data.message,
              type: "error"
            });
            return;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //初始表格数据
    inittabledata(data, status) {
      let that = this;
      if (data.head) {
        data.head.map(item => {
          if (data.content.records) {
            data.content.records.map(ite => {
              if (!ite.hasOwnProperty(item.idenCode)) {
                ite[item.idenCode] = "-";
              }
              return ite;
            });
          }
          return item;
        });
      }
      this.saveTableData.headerData = data.head;
      this.saveTableData.tableData = data.content.records;
      this.eleTable.headerData = data.head;
      if (status) {
        let head = this.saveTableData.headerData;
        for (let i = 0; i < head.length; i++) {
          if(head[i].idenType ==1){
            that.idenFilter.idenFilterCheckList.text_content.push(head[i].idenName);
            that.idenFilter.idenFilterList.text_content.push(head[i]);
          }else if(head[i].idenType ==2){
            that.idenFilter.idenFilterCheckList.num_content.push(head[i].idenName);
            that.idenFilter.idenFilterList.num_content.push(head[i]);
          }else if(head[i].idenType ==3){
            that.idenFilter.idenFilterCheckList.time_content.push(head[i].idenName);
            that.idenFilter.idenFilterList.time_content.push(head[i]);
          }else if(head[i].idenType ==4){
            that.idenFilter.idenFilterCheckList.iden_content.push(head[i].idenName);
            that.idenFilter.idenFilterList.iden_content.push(head[i]);
          }
        }
      }

      that.idenFilterSubmit();

      //增加多列运算列
      for (let i in that.table.calHeader) {
        this.eleTable.headerData.push(that.table.calHeader[i]);
        that.saveTableData.headerData.push(that.table.calHeader[i]);
      }
      if (that.table.formula.length > 0) {
        let tableData = that.saveTableData.tableData;
        let newtableData = new control.IndCalculate().startCalculate(
          tableData,
          that.table.formula
        );
        that.saveTableData.tableData = newtableData;
      }
    },
    //翻页
    pageChange(currentPage) {
      this.argstable.current = currentPage;
      this.microSearch();
    },
    handleCurrentRowChange(val) {
      this.table.selectedRow = val;
    },
    //地图定位
    gotoPosition() {
      if (this.table.selectedRow.hasOwnProperty("ID")) {
        let item = this.table.selectedRow;
        let header = this.saveTableData.headerData;
        let obj = {
          info: {
            ID: item.ID,
            MONTH: item.MONTH,
            SMX: item.SMX,
            SMY: item.SMY,
            YEAR: item.YEAR
          }
        };
        for (let k in item) {
          for (let j = 0; j < header.length; j++) {
            let header_item = header[j];
            if (
              k == header_item.idenCode &&
              !header_item.idenCode.includes("AAA")
            ) {
              //多列运算的值排除
              obj[k] = {
                name: header_item.idenName || header_item.idenCode,
                value: item[k],
                idenType:header_item.idenType,
                idenAliasCode:header_item.idenAliasCode
              };
            }
          }
        }

        let pockdata = {
          id: obj.info.ID,
          lon: obj.info.SMX,
          lat: obj.info.SMY,
          value: [obj.info.SMX, obj.info.SMY, 0],
          data: obj
        };
        EventBus.$emit("highLightMarker", pockdata, "position");
        this.$store.commit("changeShowFastCollectLayer", false);
        this.$store.commit("changeShowTypeTabLayer", false);
        this.$store.commit("changeShowTableLayer", false);
      } else {
        this.$message({
          message: "请先选中单位！",
          type: "error"
        });
        return;
      }
    },
    //指标过滤全选
    idenFilterGetAll(type) {
      let that = this;
      if(type ==1){
        let head = that.idenFilter.idenFilterList.text_content;
        that.idenFilter.idenFilterCheckList.text_content = [];
        for (let i = 0; i < head.length; i++) {
          if(head[i].idenType == type){
            that.idenFilter.idenFilterCheckList.text_content.push(head[i].idenName);
          }
        }
      }else if(type ==2){
        let head = that.idenFilter.idenFilterList.num_content;
        that.idenFilter.idenFilterCheckList.num_content = [];
        for (let i = 0; i < head.length; i++) {
          if(head[i].idenType == type){
            that.idenFilter.idenFilterCheckList.num_content.push(head[i].idenName);
          }
        }
      }else if(type ==3){
        let head = that.idenFilter.idenFilterList.time_content;
        that.idenFilter.idenFilterCheckList.time_content = [];
        for (let i = 0; i < head.length; i++) {
          if(head[i].idenType == type){
            that.idenFilter.idenFilterCheckList.time_content.push(head[i].idenName);
          }
        }
      }else if(type ==4){
        let head = that.idenFilter.idenFilterList.iden_content;
        that.idenFilter.idenFilterCheckList.iden_content = [];
        for (let i = 0; i < head.length; i++) {
          if(head[i].idenType == type){
            that.idenFilter.idenFilterCheckList.iden_content.push(head[i].idenName);
          }
        }
      }
    },
    //指标过滤取消全部
    idenFilterClearCheck(type) {
      let that = this;
      if(type == 1){
        that.idenFilter.idenFilterCheckList.text_content = [];
      }else if(type == 2){
        that.idenFilter.idenFilterCheckList.num_content = [];
      }else if(type==3){
        that.idenFilter.idenFilterCheckList.time_content = [];
      }else if(type == 4){
        that.idenFilter.idenFilterCheckList.iden_content = [];
      }
    },
    //指标反选
    idenFilterInvert(type) {
      let that = this;
      if(type==1){
        let idenFilterCheckList = [];
        let head = that.idenFilter.idenFilterList.text_content;
        for (let i = 0; i < head.length; i++) {
          if (!that.idenFilter.idenFilterCheckList.text_content.includes(head[i].idenName)) {
            idenFilterCheckList.push(head[i].idenName);
          }
        }
        that.idenFilter.idenFilterCheckList.text_content = idenFilterCheckList;
      }else if(type==2){
        let idenFilterCheckList = [];
        let head = that.idenFilter.idenFilterList.num_content;
        for (let i = 0; i < head.length; i++) {
          if (!that.idenFilter.idenFilterCheckList.num_content.includes(head[i].idenName)) {
            idenFilterCheckList.push(head[i].idenName);
          }
        }
        that.idenFilter.idenFilterCheckList.num_content = idenFilterCheckList;
      }else if(type==3){
        let idenFilterCheckList = [];
        let head = that.idenFilter.idenFilterList.time_content;
        for (let i = 0; i < head.length; i++) {
          if (!that.idenFilter.idenFilterCheckList.time_content.includes(head[i].idenName)) {
            idenFilterCheckList.push(head[i].idenName);
          }
        }
        that.idenFilter.idenFilterCheckList.time_content = idenFilterCheckList;
      }else if(type==4){
        let idenFilterCheckList = [];
        let head = that.idenFilter.idenFilterList.iden_content;
        for (let i = 0; i < head.length; i++) {
          if (!that.idenFilter.idenFilterCheckList.iden_content.includes(head[i].idenName)) {
            idenFilterCheckList.push(head[i].idenName);
          }
        }
        that.idenFilter.idenFilterCheckList.iden_content = idenFilterCheckList;
      }
    },
    //打开指标运算
    indCalculate() {
      let that = this;
      that.indenCount.indenCountDialogVisible = true;
    },
    //关闭指标运算弹窗回调
    indenCountClose() {
      let that = this;
      let grid = that.table;
      let container = "el-table";
      let callback = function(data) {
        console.log(data);
      };
      let indenCountBox = $("#indenCountBox");
      indenCountBox.empty();
      new control.IndCalculate(
        grid,
        container,
        indenCountBox,
        callback
      ).distroy();
      this.indenCount.isdisabled = false;
      this.indenCount.indenCountActiveName = "quik";
    },
    //验证通过
    validationOk() {
      this.indenCount.isdisabled = false;
      this.indenCount.indenCountActiveName = "confirm";
    },
    //关闭指标运算
    closeIndenCountDialog() {
      this.indenCount.indenCountDialogVisible = false;
    },

    indenCountOpen() {
      let that = this;
      that.table.columnCount = that.eleTable.headerData.length;
      that.table.getColLabel = that.eleTable.headerData;
      that.table.getRowsNum = that.saveTableData.tableData.length;
      that.table.headerData = that.eleTable.headerData;
      that.table.tableData = that.saveTableData.tableData;
      that.saveTableData.numIden = [];
      for (let i in that.saveTableData.headerData) {
        if (that.saveTableData.headerData[i].idenType == 2) {
          that.saveTableData.numIden.push(that.saveTableData.headerData[i]);
        }
      }
      that.table.numIden = that.saveTableData.numIden;

      let grid = that.table;
      let container = "el-table";
      let callback = function(data) {
        console.log(data);
      };
      let idenCountEle = {};
      let calculateIden = function(obj) {
        let tableData = that.saveTableData.tableData;
        let arr = [obj.formula];
        let newtableData = new control.IndCalculate().startCalculate(
          tableData,
          arr
        );
        if (newtableData) {
          //成功才保存
          that.saveTableData.tableData = newtableData;
          that.eleTable.headerData.push(obj.headerData);
          that.table.calHeader.push(obj.headerData);
          that.table.formula.push(obj.formula);
          that.saveTableData.headerData.push(obj.headerData);
          that.idenFilter.idenFilterList.num_content.push(obj.headerData);
          that.idenFilter.idenFilterCheckList.num_content.push(obj.headerData.idenName);
        }
      };

      setTimeout(function() {
        let idenCountEle = {
          indenCountBox: $("#com-selection"), //总的box
          quik: $("#calculator-quik"), //快速运算
          userDefined: $("#calculator-userDefined"), //自定义运算
          confirm: $("#calculator-confirm") //确认指标
        };
        new control.IndCalculate(
          grid,
          idenCountEle,
          calculateIden,
          that.validationOk,
          that.closeIndenCountDialog,
          callback
        ).toggle();
      }, 100);
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "../css/rule.scss";
.tableLayer {
  width: 100vw;
  height: calc(100% - 40px);
  position: absolute;
  top: 0;
  z-index: 1200;
  background: rgba(247, 247, 247, 1);
  top: 40px;
  .header {
    p {
      text-align: center;
      margin-top: 15px;
      font-size: 16px;
      font-weight: bold;
      color: rgba(34, 34, 34, 1);
      line-height: 10px;
    }
  }
  .content {
    .nav {
      float: right;
      width: 100%;
      text-align: right;
      background: rgba(238, 238, 238, 1);
      margin: 20px 0;
      box-sizing: border-box;
      position: relative;
      display: inline-block;
      .search-box {
        float: left;
      }
      button {
        width: auto;
        height: auto;
        background: none;
        border: none;
        margin: 0;
      }
      button:visited,
      button:hover {
        background: rgba(2, 112, 139, 0.78);
        color: #fff;
        border-radius: 0;
      }
    }
    .table-box {
      width: 1000px;
      height: 500px;
      position: relative;
      display: inline-block;
    }
  }
}
</style>
<style rel="stylesheet/scss" lang="scss">
@import "../css/rule.scss";
.tableLayer {
  .el-table__header-wrapper {
    tr {
      th {
        background: rgba(239, 242, 243, 1);
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 10px;
      }
    }
  }
  .el-button.is-plain:focus,
  .el-button.is-plain:hover {
    border: 1px solid $fontColorActive;
    color: $fontColorActive;
  }
  .el-pagination {
    margin-top: 10px;
    button:disabled {
      background: none;
    }
    button {
      width: auto;
    }
    .el-pager li:not(.disabled).active {
      color: $fontColorActive;
    }
    .el-pager {
      li {
        background: none;
      }
      li:hover {
        color: $fontColorActive;
      }
    }
    .el-pagination__jump {
      input {
        background: none;
      }
      .el-input__inner:focus {
        border-color: #c0c4cc;
      }
    }
    .btn-next,
    .btn-prev {
      background: none;
    }
  }
  tr {
    th {
      cursor: pointer;
    }
    th.active,
    td.active {
      background: rgba(29, 156, 183, 0.1);
      color: $fontColorActive;
    }
  }
  tr.current-row > td,
  tr:hover > td {
    background: rgba(29, 156, 183, 0.1);
    color: $fontColorActive;
  }
  .el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: rgba(29, 156, 183, 0.1);
    color: $fontColorActive;
  }
}
#com-selection {
  tr.current-row > td,
  tr:hover > td {
    background-color: #3c93ec00 !important;
  }
  #btnContainer {
    width: 230px;
  }
  .el-tabs__header {
    background: none;
    margin-top: 0;
    padding-top: 0;
  }
  .el-tabs__nav {
    border: 1px solid #e4e7ed;
    .el-tabs__item {
      border-left: 1px solid #e4e7ed;
      color: #303133 !important;
    }
  }
  .el-tabs__nav .el-tabs__item.is-active {
    color: $fontColorActive !important;
    background: none;
    border-bottom-color: #fff;
    border: 1px solid #1d9cb7;
    border-bottom: none;
  }
  .el-tabs__header {
    padding-left: 0 !important;
  }
  .el-tabs__content {
    background: none;
    border-radius: 0 5px 5px 5px;
    padding: 0;
  }
  #msg,
  #userMsg {
    color: red;
    width: 240px;
    display: inline-block;
    text-align: left;
  }
  .is-disabled {
    cursor: not-allowed;
  }
  .title {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    line-height: 20px;
    opacity: 0.8;
    line-height: 2.5;
  }
  #quik {
    td {
      padding-right: 20px;
    }
  }
  .el-tabs {
    margin-top: 0;
  }
  #confirm .title {
    line-height: 1;
  }
  #calcMsg {
    color: red;
  }
}
.popoverdanlieyunsuan {
  padding: 0;
  width: 110px;
  min-width: 110px;
  button {
    float: left;
    border-radius: 0;
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
    width: 110px;
    margin-left: 0 !important;
  }
  .el-button.is-plain:focus,
  .el-button.is-plain:hover {
    border-color: $fontColorActive;
    color: $fontColorActive;
  }
}
.idenFilterDialog {
  #idenFilterTab{
    .el-tabs__header{
      background: none!important;
      .el-tabs__item {
        color:rgba(51,51,51,1)!important;
        border:1px solid #eeeeee!important;
        border-radius:4px 4px 0px 0px;
      }
      .el-tabs__item.is-active {
        border-bottom-color: #FFF;
        border: 1px solid rgba(29,156,183,1)!important;
        color:#1d9cb7;
        border-bottom: 1px solid #eeeeee !important;
        background: rgba(4, 27, 67, 0);
      }
    }
  }

  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    border: 1px solid $fontColorActive;
    background: $fontColorActive;
  }
  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: rgba(51, 51, 51, 0.8);
  }
  .el-dialog__footer {
    .el-button--primary {
      background-color: $fontColorActive;
      border-color: $fontColorActive;
    }
  }
  .el-dialog__header {
    border-bottom: 1px solid #ddd;
  }
  .content {
    .el-checkbox-group {
      height: 200px;
      overflow: auto;
    }
    label {
      width: 100%;
      margin-left: 0;
      margin-bottom: 5px;
      margin-right: 0;
    }
  }
  .btn-box {
    margin-top: 30px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    border-top: 1px solid #ddd;
    padding-top: 10px;
    button {
      width: auto;
      height: auto;
    }
  }
  .el-dialog__footer {
    button {
      width: auto;
      height: auto;
    }
  }
}
.microdanlieyunsuanclass {
  width: 400px !important;
  .el-message-box__content {
    padding: 15px 15px;
    color: #606266;
    font-size: 14px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    .el-message-box__message {
      h3 {
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 20px;
        opacity: 0.8;
        font-size: 14px;
      }
      h1 {
        font-size: 30px;
        font-weight: bold;
        color: rgba(29, 156, 183, 1);
        line-height: 20px;
      }
    }
  }
  .el-message-box__btns {
    button,
    .el-button--primary {
      background: rgba(29, 156, 183, 1);
      border-radius: 4px;
      border: none;
    }
  }
}
.idenCountDialog {
  .el-dialog__header {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    line-height: 1;
    border-bottom: 1px solid rgba(238, 238, 238, 1);
    padding: 15px;
  }
  #quickNext {
    width: 74px;
    height: 32px;
    background: rgba(29, 156, 183, 1);
    border-radius: 4px;
    border: none;
    color: #fff;
    cursor: pointer;
  }
  tr.current-row > td,
  tr:hover > td {
    background: rgba(29, 156, 183, 0.1);
    color: #333333;
    cursor: pointer;
  }
  #quikAllIndList {
    line-height: 22px;
    input {
      margin-right: 3px;
    }
  }
  #userIndList {
    width: 190px !important;
    .userIndItem {
      height: 30px;
      background: rgba(248, 248, 248, 1) !important;
      border: 1px solid #eeeeee !important;
      border-radius: 2px;
      font-size: 14px !important;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      line-height: 30px;
      padding-left: 10px;
    }
  }
  #btnContainer {
    #bbks {
      width: 67px;
    }
  }
  #calc-next {
    width: 74px;
    height: 32px;
    background: #1d9cb7;
    border-radius: 4px;
    border: none;
    color: #fff;
    cursor: pointer;
  }
  #LED {
    border: 1px solid #f5f5f5;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    height: 32px !important;
    div {
      line-height: 30px;
    }
  }
  #calculateFrame {
    tr {
      td {
        border: none;
        .highlight-box-inner {
          border: 0px solid #ffffff;
        }
        #buttons {
          height: auto !important;
          width: 180px;
        }
      }
    }
  }
  #confirm {
    .description {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      line-height: 20px;
    }
    .highlight-box {
      .title {
        input.highlight-box-inner {
          width: 260px !important;
          height: 30px !important;
          border: 1px solid rgba(213, 213, 213, 1) !important;
          border-radius: 2px !important;
          padding-left: 5px;
        }
      }
    }
  }
  #calculateButton {
    width: 74px;
    height: 32px;
    background: #1d9cb7;
    border-radius: 4px;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 8px 15px;
    text-decoration: none;
  }
}
</style>
